<template>
  <div class="language-currency-selector" @mouseenter="showPopup = true;arrowsChange = true" @mouseleave="showPopup = false;arrowsChange = false">
    <!-- 当前语言/当前币种显示 -->
    <div class="trigger" :class="triggerHover" @mouseenter="triggerHover = 'triggerHover'" @mouseleave="triggerHover = 'trigger'">
      🌐 {{ language }}/ {{ currency }}
      <myArrows width="30px" height="30px" color="#444444" :isHovered="arrowsChange"></myArrows>

    </div>
    <div class="popup" v-show="showPopup" @mouseenter="triggerHover = 'triggerHover'"
      @mouseleave="triggerHover = 'trigger'">
      <!-- 语言切换 -->
      <div class="section">
        <div class="title">Language</div>
        <div class="buttons">
          <button v-for="(item, index) in langs" :key="index" :class="{ active: language === item.textLang }"
            @click="saveChangeLanguage(item)">
            {{ item.selectLang }}
          </button>
        </div>
      </div>
      <!-- 币种切换 -->
      <div class="section">
        <div class="title">Currency</div>
        <div class="buttons">
          <button v-for="(item, index) in currencys" :key="index" :class="{ active: currency === item.textMoney }"
            @click="currency = item.textMoney">
            {{ item.textMoney }}
          </button>
        </div>
      </div>
      <!-- OK 切换按钮 -->
      <div class="ok-button">
        <button class="submit" @click="submit">OK</button>
      </div>
    </div>
  </div>
</template>

<script>
import myArrows from "@/components/myHome/myArrows"
export default {
  name: 'myLangChange',
  components: {
    myArrows
  },
  data() {
    return {
      // 语言 / 币种切换
      showPopup: false,
      triggerHover: 'trigger', // English/ USD 样式
      language: 'English',
      currency: 'USD',
      tagLang: '', // 用来切换语言使用的 zh-CN en这些
      langs: [  // 选择的语言 显示文字的语言
        { selectLang: "中文（简体）", textLang: "中文", floorLang: 'zh-CN' },
        { selectLang: "English", textLang: "English", floorLang: 'en' }
      ],
      currencys: [
        { selectMoney: "CN ¥", textMoney: "CNY" },
        { selectMoney: "US $", textMoney: "USD" }
      ],

      // 箭头旋转
      arrowsChange: false
    };
  },
  methods: {
    submit() {
      this.showPopup = false // 把popur菜单栏关闭
      this.$i18n.locale = this.tagLang
      localStorage.setItem('locale',  this.tagLang)
    },
    // 保存当前选择的语言
    saveChangeLanguage(item) {
      this.language = item.textLang; // 显示的文字切换
      this.tagLang = item.floorLang; // 为切换语言做的标记
    }
  }
}
</script>

<style lang="scss" scoped>
.language-currency-selector {
  position: relative;
  display: inline-block;

  .trigger {
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    color: #333;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    display: flex;
    height: 50px;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    z-index: 2;
  }

  .triggerHover {
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    color: #00B2B9;
    background-color: white;
    display: flex;
    height: 50px;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    z-index: 2;
  }

  .popup {
    position: absolute;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    top: 50px;
    left: 0;
    width: 250px;
    padding: 15px;
    background: white;
    z-index: 10;
    font-family: sans-serif;

    .section {
      margin-bottom: 12px;

      .title {
        font-size: 12px;
        color: #666;
        margin-bottom: 18px;
        text-align: left;
      }

      .buttons {
        display: flex;
        justify-content: space-between;

        button {
          flex: 1;
          margin-right: 8px;
          padding: 8px 0;
          border: 1px solid #00B2B9;
          background: white;
          color: #00B2B9;
          border-radius: 20px;
          font-size: 12px;
          cursor: pointer;
          transition: 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &.active {
            background: #00B2B9;
            color: white;
          }
        }
      }
    }

    .ok-button {
      text-align: right;
      margin-top: 30px;

      button {
        background: white;
        border: 1px solid #ddd;
        color: #00B2B9;
        border-radius: 20px;
        padding: 6px 30px;
        font-size: 12px;
        cursor: pointer;
        width: 106px;
        height: 32px;

        &:hover {
          color: #ddd;
          background-color: #00B2B9;
        }
      }
    }
  }
}
</style>
